<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-alert
      class="mb-20"
      show-icon
      :closable="false"
      title="提交申请后，工作人员将在1-3个工作日内进行审核，审核结果将第一时间以短信的形式通知给您"
      type="warning"
    />
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="140px"
      :disabled="formType == 'detail' ? true : false"
    >
      <el-form-item
        label="本次申请算力"
        prop="applyComputingPower"
        v-if="formType == 'power'"
      >
        <el-input-number
          v-model="formData.applyComputingPower"
          :min="0"
          :max="999999999"
          controls-position="right"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="附加说明" prop="applyRemark">
        <el-input
          type="textarea"
          rows="4"
          v-model="formData.applyRemark"
          placeholder="请输入附加说明"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        class="liner-btn-opacity liner-btn"
        type="primary"
        @click="submitForm"
        v-loading="formLoading"
        >确 定</el-button
      >
    </template>
  </el-dialog>
</template>
<script setup>
import { userApplyCreate } from "@/api/user";
import { onMounted, ref, watch, computed, useTemplateRef, reactive } from "vue";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
// import { FormRules } from 'element-plus'
import { useMessage } from "@/hooks/web/useMessage";
defineOptions({ applyRemark: "SystemDeptForm" });
const userStore = useUserStore();
let { getUserInfo, getMenu } = storeToRefs(userStore);
const message = useMessage(); // 消息弹窗

const { phone } = defineProps({
  phone: {
    default: "",
  },
});
const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(""); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(""); // 表单的类型：create - 新增；update - 修改
const formData = ref({
  applyRemark: undefined,
  computingPower: undefined,
  accountEndDate: undefined,
  applyComputingPower: undefined,
});
const formRules = reactive({
  // applyRemark: [{ required: true, message: "企业名称不能为空", trigger: "blur" }],
  computingPower: [
    { required: true, message: "企业算力不能为空", trigger: "blur" },
  ],
  applyComputingPower: [
    { required: true, message: "申请算力不能为空", trigger: "blur" },
  ],
  accountEndDate: [
    { required: true, message: "账号截止日期不能为空", trigger: "blur" },
  ],
});
const formRef = ref(); // 表单 Ref
/** 打开弹窗 */
const open = async (type, id) => {
  dialogVisible.value = true;
  dialogTitle.value = type == "power" ? "申请更多算力" : "申请账号延期";
  formType.value = type;
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      formData.value = await UserApi.getDept(id);
    } finally {
      formLoading.value = false;
    }
  }
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(["success"]); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  if (!formRef) return;
  const valid = await formRef.value.validate();
  if (!valid) return;
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value;
    await userApplyCreate({
      applyUserPhone: getUserInfo.value.mobile || phone,
      applyRemark: data.applyRemark,
      applyComputingPower: data.applyComputingPower,
      applyType: formType.value === "power" ? 1 : 2,
    });
    message.success("申请成功");
    dialogVisible.value = false;
    // 发送操作成功的事件
    emit("success");
  } finally {
    formLoading.value = false;
  }
};

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    applyRemark: undefined,
    computingPower: undefined,
    accountEndDate: undefined,
    applyComputingPower: undefined,
  };
  formRef.value?.resetFields();
};

// 时间组件 只能选择今天之后的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7;
};
</script>
